<template>
	<view class="outer_box">
		<view class="refund-box">
			<view class="refund-card">
				<view class="refund-card-v">
					<view class="apply-key">
						<view class="apply-type">
							申请类型
						</view>
							<picker class="ml--1" @change="bindPickerChange2" :value="index2" :range="array2">
								<view class="uni-input">{{array2[index2]}}</view>
							</picker>
							<view class="qianjin">
								<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode=""></image>
							</view>

					</view>
					<view class="apply-key">
						<view class="">
							申请原因
						</view>
						<!-- <view class="">
							请选择
						</view> -->
						<picker class="ml--1" @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
						</picker>
						<view class="qianjin">
							<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode=""></image>
						</view>

					</view>
					<view class="apply-key-2">
						<view class="">
							退款说明
						</view>

					</view>
					<view class="explain">
						<textarea type="text" v-model="refound.refundRemark" value="" placeholder="请填写补充说明，有利于您的退款售后哦~"
							placeholder-style="color:#AAAAAA;font-size: 28rpx;border-radius:12rpx" />
					</view>
					<view class="apply-key-2">
						<view class="">上传图片</view>
						<view class=""></view>

					</view>
					<view class="box refond-image d-f-wrap mt-2">
						<view class="image-url mx-1" v-for="(item,index3) in imageUrl" :key='index3'>
							<image class="image" @tap='previewImg(index3)' :src="item" mode="aspectFill"></image>
							<image class="iconcha" src="../../static/lipdee/guanbi@2x.png" mode="" @tap='delImage(index3)'></image>
							<!-- <text @tap='delImage(index3)' class="iconfont iconcha"></text> -->
						</view>
						<view class="add-image d-jc-c d-ai-c" @tap='upImage'>
							<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/order/sc@2x.png"></image>
						</view>
					</view>
					<!-- <view class="upload">
						<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/order/sc@2x.png" mode=""></image>
					</view> -->

				</view>
			</view>
			<view class="bg-1 mt-2">
						<view class="">
							选择退款商品
						</view>
						<view class="line"></view>
						<view class="">
							<view class="box content d-ai-c my-2 " :class="item.verificationStatus==0?'':'img-gray'"
								v-for="(item,index) in orderInfo.goodSkuDto">
								<view class="flex-1 ">
									<view class="iconfont"
										:class="(checkedArr.indexOf(item.goodsId)>=0) || item.verificationStatus!=0 ?'icon-dui':'icon-quan'"
										@tap='chooseChecked(item)'></view>
								</view>
								<view class="flex-8 box ml-1 " :class="item.verificationStatus==0?'':'text-line'">
									<view class="box d-jc-c ">
										<image :src="item.image" mode=""></image>
									</view>
									<view class="box_center ml-1">
										<view class="title1">{{item.goodsName}}</view>
										<view class="text-pink">￥{{item.goodsPrice}}</view>
									</view>
								</view>
								<view class="flex-1 box" :class="item.verificationStatus==0?'':'text-line'">
									<text class="number">x{{item.number}}</text>
			
								</view>
							</view>
						</view>
			
					</view>
			<!-- <view class="product-card">
				<view class="product-title">
					<view class="">选择退款商品</view>
				</view>
				<view class="product-box" v-for="(item,index) in orderInfo.goodSkuDto">
					<view class="">
						<image v-if="checked==1" @tap='select(orderInfo)' src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/xuanzhong.png" mode=""></image>
						<image v-if="checked==0" @tap='select1(orderInfo)' src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/weixuan.png" mode=""></image>
					</view>
					<productInfo class="productInfo" :productInfo='item'>
						<text slot='number-btn' class="number">x{{item.number}}</text>
						<view slot='sku' class="sku">1000g</view>
						<view slot='price' class="price">￥{{item.goodsPrice}}</view>	
					</productInfo>

				</view>
				<view class="">
					<view class="box content d-ai-c my-2 " :class="item.verificationStatus==0?'':'img-gray'"
						v-for="(item,index) in orderInfo.goodSkuDto">
						<view class="flex-1 ">
							<text class="iconfont"
								:class="(checkedArr.indexOf(item.goodsId)>=0) || item.verificationStatus!=0 ?'icon-dui':'icon-quan'"
								@tap='chooseChecked(item)'></text>
						</view>
						<view class="flex-8 box ml-1 " :class="item.verificationStatus==0?'':'text-line'">
							<view class="box d-jc-c ">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="box-c d-jc-sb ml-1">
								<text class="title1">{{item.goodsName}}</text>
								<text class="text-pink">{{item.goodsPrice}}积分</text>
							</view>
						</view>
						<view class="flex-1 box" :class="item.verificationStatus==0?'':'text-line'">
							<text class="number">x{{item.number}}</text>
				
						</view>
					</view>
				</view>

			</view> -->
		<view class="btn-box">
			<view class="btn" @tap="ordersRefund">
				提交申请
			</view>
		</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkedArr: [],
				price:0,
				checked:0,
				orderInfo:'',
				imageUrl: [],
				pushImageUrl: [],
				refound: {
					orderNumber: this.orderNumber,
					refundRemark: '',
					refundType: '',
					refundCause: '',
					refundImage: '',
					goodsId: []
				
				},
				array: ['我不想要了', '买错了/已经重复下单'],
				array2: ['仅退款(无需退换货)', '退货退款'],
				index: 0,
				index2: 0,
				productInfo: {
					title: '进口苹果',
					image: 'https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/login/logo.png',
					sku: '1000g',
					price: '30'
				}

			}
		},
		onLoad(parameter) {
			this.orderNumber = parameter.orderNumber
			this.getOrdersInfo(parameter.orderNumber)
			// this.getOrdersInfo('21062515201566983943')
		},
		methods: {
			chooseChecked(item) {
				if (item.verificationStatus == 1) {
					uni.showToast({
						title: '订单已被核销,无法申请',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if (item.verificationStatus == 2) {
					uni.showToast({
						title: '订单已被退款,无法申请',
						duration: 1000,
						icon: "none"
					});
					return
				}
				let i = this.checkedArr.indexOf(item.goodsId);
				console.log(i)
				if (i >= 0) {
					this.checkedArr.splice(i, 1)
				} else {
					this.checkedArr.push(item.goodsId)
				}
			
				console.log(JSON.stringify(this.checkedArr))
			
			},
			ordersRefund() {
					this.refound.orderNumber = this.orderNumber
					this.refound.refundType = this.index + 1
					this.refound.refundCause = this.index2 + 1
					this.refound.refundImage = JSON.stringify(this.pushImageUrl)
					this.refound.goodsId = this.checkedArr
					console.log(this.refound)
					this.$api.ordersRefund(this.refound).then(res => {
							if (res.data.success) {
								uni.showToast({
									title: "提交成功！",
									duration: 2000,
									icon: 'none',
								});
								// uni.navigateBack(1)
								uni.$emit('carData',9)
								uni.navigateTo({
									url:'order'
								})
							} else {
								uni.showToast({
									title: res.data.message,
									duration: 1000,
								});
							}
			
					})
			
			},
			select1(item){
				console.log(item)
				this.checked = 1
				for(var i = 0;i < item.goodSkuDto.length; i++){
					this.price = Number(this.price) + parseFloat(item.goodSkuDto[i].goodsPrice) * parseInt(item.goodSkuDto[i].number)* 100
					this.checkedArr.push
				}
				console.log(this.price)
			},
			select(item){
				this.checked = 0
				for(var i = 0;i < item.goodSkuDto.length; i++){
					this.price = Number(this.price) - parseFloat(item.goodSkuDto[i].goodsPrice) * parseInt(item.goodSkuDto[i].number)* 100
					}
				console.log(this.price)
				},
			getOrdersInfo(orderNumber) {
				this.$api.getOrdersInfo({
					orderNumber: orderNumber
				}).then((res) => {
					if (res.data.success) {
						this.orderInfo = res.data.dataMap
			
					} else {
			
					}
			
				})
			},
			upImage() {
				let _this = this
				let url = 'https://app.xiangban365.com/app_mobile/upload/file'
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						_this.imageUrl = _this.imageUrl.concat(res.tempFilePaths);
						uni.uploadFile({
							url: url, //仅为示例，非真实的接口地址
							// url: "http://111.229.135.6:8001/upload/file", //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
							},
							success: function(uploadFileRes) {
								let data = JSON.parse(uploadFileRes.data)
								console.log(data.dataMap)
								_this.image = data.dataMap
								_this.pushImageUrl = _this.pushImageUrl.concat(_this.image);
								console.log("------" + _this.image)
							}
						});
			
					},
					fail: err => {
						console.log('选择图片失败！')
						// #ifdef APP-PLUS
						if (plus.os.name == 'iOS') {
							var PHPhotoLibrary = plus.ios.importClass('PHPhotoLibrary')
							var PHAuthorizationStatus = PHPhotoLibrary.authorizationStatus()
							if (PHAuthorizationStatus != 3) {
								uni.showModal({
									content: '需要访问您的相册，请在设置里开启',
									confirmText: '设置',
									success: res => {
										if (res.confirm) {
											plus.runtime.openURL('app-settings://')
										}
									}
								});
							}
						}
						// #endif
						console.log(JSON.stringify(err))
					}
				});
			},
			delImage(index) {
				this.imageUrl.splice(index, 1)
				this.pushImageUrl.splice(index, 1)
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index2 = e.target.value
			},
			openRefundInfo(){
				uni.navigateTo({
					url:'refundInfo'
				})
			}

		}
	}
</script>

<style lang="less" scoped>

	page {
		background-color: #f8f8f8;
	}
	.box{
		margin-top: 10rpx;
		display: flex;
		// justify-content: space-between;
		align-items: center;
	}
	.bg-1 {
		padding: 20rpx;
		width: 650rpx;
		min-height: 200rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;
		.box_center{
			margin-left: 15rpx;
		}
		.textarea {
			width: 600rpx;
			background-color: #F8F8F8;
			min-height: 70rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			padding: 25rpx 20rpx;
		}
	
		.flex-8{
			width: 400rpx;
			margin-left: 30rpx;
		}
	
		.title1 {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			// margin-top: -25rpx;
		}
		.text-pink{
			margin-top: 35rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #FF8308;
		}
		.iconfont{
			width: 100rpx;
			height: 100rpx;
		}
		.content {
			.text-line {
				text {
					text-decoration: line-through
				}
			}
	
			.icon-dui {
				width: 50rpx;
				height: 50rpx;
				background: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/xuanzhong.png) no-repeat 100% 100%;
				background-size: cover;
			}
			.icon-quan {
				width: 50rpx;
				height: 50rpx;
				background: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/weixuan.png) no-repeat 100% 100%;
				background-size: cover;
				// color: #FF5551 !important;
			}
			.number {
				color: #666666;
				font-size: 30rpx;
				width: 100rpx;
				text-align: end;
				margin-top: 55rpx;
			}
	
			image {
				width: 128rpx;
				height: 128rpx;
				border-radius: 10rpx;
			}
	
			view:nth-child(1) {
				text {
					font-size: 42rpx;
					color: #CCCCCC;
				}
	
			}
		}
	
		.iconqianjin {
			font-size: 24rpx;
		}
	
		.title {
			text:first-child {
				width: 140rpx;
				color: #666666;
				font-size: 28rpx;
			}
	
			text:nth-child(2) {
				width: 300rpx;
				color: #333333;
				font-size: 30rpx;
			}
		}
	}
	.refond-image {
		display: flex;
		image {
			height: 140rpx;
			width: 140rpx;
			margin-right: 20rpx;
		}
	
		.image-url {
			position: relative;
	
			.iconcha {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				color: #ffffff;
				background-color: rgba(0, 0, 0, 0.8);
				height: 30rpx;
				width: 30rpx;
				text-align: center;
				font-size: 22rpx;
				line-height: 30rpx;
				border-radius: 50rpx;
	
				.image {
					height: 88rpx;
					width: 100rpx;
					border-radius: 10rpx;
				}
			}
		}
	
		.add-image {
			width: 160rpx;
			height: 160rpx;
			// background-color: #F8F8F8;
	
			// image {
			// 	height: 88rpx;
			// 	width: 100rpx;
			// 	border-radius: 10rpx;
			// }
		}
	}
	// .apply-type{
	// 	flex: 7 !important;
	// }
	
	.outer_box {

		.refund-box {
			padding: 20rpx;

			.explain {
				background: #F8F8F8;
				width: 100%;
				height: 142rpx;
				margin: 0 auto;

				textarea {
					height: 70rpx;
					padding: 20rpx;
				}
			}
			.btn-box {
				display: flex;
				justify-content: center;
			
				.btn {
					width: 82%;
					height: 100upx;
					background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
					border-radius: 50upx;
					color: #FEFEFE;
					font-size: 32upx;
					line-height: 100upx;
					text-align: center;
					margin: 80rpx 0;
				}
			
			}

			.product-card {
				width: 100%;
				background: #FFFFFF;
				border-radius: 12rpx;
				margin-top: 30rpx;
				padding-bottom: 20rpx;

				.product-box {
					display: flex;
					margin: 4rpx 10rpx 30rpx 30rpx;	

					view:nth-child(1) {
						display: flex;
						align-items: center;
					}

					.productInfo {
						width: 100%;

						.sku {
							color: #999999;
							font-size: 24rpx;
						}
						.price {
							font-size: 36rpx;
							font-weight: bold;
							color: #FF8308;
						}
						.number {
							width: 100%;
							text-align: end;
							color: #333333;
							font-weight: bold;
						}
					}

					image {
						margin-right: 20rpx;
						width: 48rpx;
						height: 48rpx;
					}
				}

				.product-title {
					padding: 20rpx;

					view:nth-child(1) {
						border-bottom: 2rpx solid #f8f8f8;
						padding-bottom: 20rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}
				}
			}



			.refund-card {
				width: 100%;
				background: #FFFFFF;
				border-radius: 12rpx;

				.refund-card-v {
					padding: 20rpx 20rpx;

					.upload {
						image {
							width: 160rpx;
							height: 160rpx;
						}
					}

					.apply-key-2 {
						display: flex;
						align-items: center;
						padding: 20rpx 0;

						view:nth-child(1) {
							flex: 2;
							font-size: 28rpx;
							color: #666666;

						}
					}

					.apply-key {
						display: flex;
						align-items: center;
						border-bottom: 2rpx solid #f8f8f8;
						padding: 20rpx 0;
						view:nth-child(1){
							flex: 7 !important;
						}

						.qianjin {
							display: flex;
							justify-content: flex-end;
							flex:1;
							width: 100rpx;
						}

						view:nth-child(1) {
							flex: 2;
							font-size: 28rpx;
							color: #666666;

						}

						view:nth-child(2) {
							flex: 6;
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #999999;
						}

						view:nth-child(3) {
							flex: 1;

							image {
								width: 11rpx;
								height: 19rpx;
							}
						}

						#refund-type {
							font-size: 28rpx;
							font-weight: bold;
							color: #333333
						}

					}
				}



			}

		}
	}
</style>
